<template>
  <div class="restsBox">
    <!-- 标题 -->
    <x-header :left-options="{showBack: true,backText:''}" class="headerBox">
      其他
      <router-link :to="{name:'restsAdd',params:{id:userId}}" slot="right" class="addBtn">添加</router-link>
    </x-header>
    <!-- 搜索 -->
    <div class="searchBox">
      <div class="searchInner flex">
        <x-icon type="ios-search-strong" size="22" class="searchIcon"></x-icon>
        <input
          type="text"
          class="searchInput"
          v-model="keyWord"
          placeholder="搜索内容"
          @keyup.enter="searchClick"
        />
      </div>
    </div>
    <div class="listBox">
      <swipeout>
        <swipeout-item v-for="(item,index) in restsList" :key="index" class="listItem">
          <div slot="right-menu">
            <img src="../assets/img/delete.png" alt class="deletImg" @click="deletClick(item)" />
          </div>
          <div slot="content" class="contentBox flex">
            <img :src="item.img" alt class="listImg" />
            <div class="rigthBox">
              <div class="listTitle">{{item.title}}</div>
              <div class="listContent">{{item.content}}</div>
            </div>
          </div>
        </swipeout-item>
      </swipeout>
    </div>
  </div>
</template>

<script>
import { XHeader, Swipeout, SwipeoutItem, } from 'vux'
export default {
  components: {
    XHeader,
    Swipeout,
    SwipeoutItem,
  },
  data() {
    return {
      keyWord: '',
      userId: '',
      restsList: [
        {
          id: '1',
          img: require('../assets/img/img_qita.png'),
          title: '这是一个其他标题的例子',
          content: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
        },
        {
          id: '2',
          img: require('../assets/img/img_qita.png'),
          title: '这是一个其他标题的例子',
          content: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
        },
      ]
    }
  },
   mounted() {
    this.userId = this.$route.query.id
  },
  methods: {
    deletClick(item) {
      // this.$http.get('url', {
      //   params: {
      //     seach: this.keyWord
      //   }
      // }).then(res => {
      //   // 成功相应
      // })
      alert('删除' + item.id)
    }
  }

}
</script>

<style lang="less" scoped>
.restsBox {
  // 头部导航
  /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
    .vux-header-title {
      color: #000;
    }
    .vux-header-right {
      color: #000;
      .addBtn {
        color: currentColor;
      }
    }
  }
  // 搜索
  .searchBox {
    padding: 20px;
    border-bottom: 20px solid #f8f9fa;
    .searchInner {
      background-color: #f5f5f5;
      border-radius: 30px;
      padding: 10px 20px;
      .searchIcon {
        fill: #6c6c6c;
        margin-right: 10px;
      }
      .searchInput {
        outline: none;
        border: none;
        background-color: #f5f5f5;
      }
    }
  }
  // 证书列表
  .listBox {
    .listItem {
      padding: 20px;
      border-bottom: 20px solid #f8f9fa;
      .deletImg {
        width: 80px;
        position: absolute;
        right: 10px;
        top: 45%;
        transform: translate(-50%, -30%);
      }
      .contentBox {
        overflow: hidden;
        //  padding: 20px;
        .listImg {
          width: 200px;
          margin-right: 20px;
        }
        .rigthBox {
          height: 160px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .listTitle {
            font-weight: bold;
            font-size: 32px;
          }
          .listContent {
            color: #6c6c6c;
            font-size: 28px;
          }
        }
      }
    }
  }
}
</style>